<template>
  <div class="home-h5">
    <header-h5 class="home-h5-top">
      <div slot="logo">
        <img src="../../assets/logo.png">
      </div>
      <div slot="menu">
        <el-dropdown @command="handleCommand" trigger="click">
          <span class="menu-h5-select">
            目录选择<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(menu, index) in navigatorData" :key="index" :command="menu">
              <i :class="`el-icon-${menu.icon}`"></i>
              <span>{{ menu.title }}</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div slot="countdown">
        <coundDown :isH5="true"/>
      </div>

      <div slot="logout">
        <span class="el-icon-setting userEdit" @click="exit"></span>
      </div>
    </header-h5>

    <div class="home-h5-bottom">
      <router-view></router-view>
    </div>

    <el-dialog
      title="登出: "
      :visible.sync="dialogVisible"
      width="70%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="handleClose"
    >
      <div class="logout-dialog">
        <span class="tips">是否退出当前系统!</span>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="handleClose">取消</el-button>
          <el-button size="mini" type="primary" @click="logout">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import NavData from '@/mock/navigator-h5.data.json'
import coundDown from '@/views/countDown/index.vue'

export default {
  data () {
    return {
      navigatorData: NavData.navigator,
      isCollapse: false,
      dialogVisible: false
    }
  },
  components: {
    coundDown
  },
  methods: {
    handleCommand (params) {
      this.$router.push({path: params.route})
    },
    changeCollapse () {
      this.isCollapse = !this.isCollapse;
    },
    exit() {
      this.dialogVisible = true;
    },
    handleClose () {
      this.dialogVisible = false;
    },
    logout () {
      this.handleClose();
      this.$router.push({path: '/login'})
    }
  }
}
</script>